.loader-wrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    vertical-align: center;
    text-align: center;
    top: 50%;
    left: 50%;
    gap: 20px;
    transform: translate(-50%, -50%);
    margin-top: -28px;

    p {
        text-align: center;
        user-select: none;

        &:after {
            content: '.';
            color: hsl(var(--text-secondary));
            animation: dots 1s steps(5, end) infinite;

            @keyframes dots {
                0%,
                20% {
                    color: rgba(0, 0, 0, 0);
                    text-shadow:
                        0.25em 0 0 rgba(0, 0, 0, 0),
                        0.5em 0 0 rgba(0, 0, 0, 0);
                }
                40% {
                    color: hsl(var(--text-secondary));
                    text-shadow:
                        0.25em 0 0 rgba(0, 0, 0, 0),
                        0.5em 0 0 rgba(0, 0, 0, 0);
                }
                60% {
                    text-shadow:
                        0.25em 0 0 hsl(var(--text-secondary)),
                        0.5em 0 0 rgba(0, 0, 0, 0);
                }
                80%,
                100% {
                    text-shadow:
                        0.25em 0 0 hsl(var(--text-secondary)),
                        0.5em 0 0 hsl(var(--text-secondary));
                }
            }
        }
    }

    .loader {
        position: relative;
        top: 0 !important;
        left: 0 !important;
        border: 4px solid hsl(var(--text));
        border-left-color: transparent;
        border-radius: 50%;
        width: 46px;
        height: 46px;
        animation: SpinAnimation 1s linear infinite;

        @keyframes SpinAnimation {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    }
}
